<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div id="app">
  <h3>单行文本框</h3>
  <input type="text" v-model="singleText" style="width: 240px;">
  <p>{{ singleText }}</p>
  <h3>多行文本框</h3>
  <textarea v-model="multiText" style="width: 240px;"></textarea>
  <pre>{{ multiText }}</pre>
  <h3>单选框</h3>
  <!--
    由于点击被选中的单选项无法取消其被选中状态，所以实战中基本没有使用单个单选项的场景。
    这里，设置v-model共用同一个变量（radioValue）可实现RadioGroup的效果
  -->
  <input id="ra" type="radio" value="杨玉环" v-model="radioValue">
  <label for="ra">A.杨玉环</label>
  <input id="rb" type="radio" value="赵飞燕" v-model="radioValue">
  <label for="rb">B.赵飞燕</label>
  <p>{{ radioValue }}</p>
  <h3>单个复选框</h3>
  <!-- 单个复选框被用于true和false的切换 -->
  <input id="c" type="checkbox" v-model="toggleValue">
  <label for="c">天生丽质</label>
  <p>{{ toggleValue }}</p>
  <h3>多个复选框</h3>
  <!-- 多个复选框, v-model接收数组类型变量 -->
  <input id="ca" type="checkbox" value="漂亮" v-model="checkedValues">
  <label for="ca">A.回眸一笑百媚生</label>
  <input id="cb" type="checkbox" value="瘦弱" v-model="checkedValues">
  <label for="cb">B.体轻能为掌上舞</label>
  <input id="cc" type="checkbox" value="得宠" v-model="checkedValues">
  <label for="cc">C.三千宠爱在一身</label>
  <p>{{ checkedValues.join(',') }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
  let vm = new Vue({
    el: '#app',
    data () {
      return {
        singleText: '',
        multiText: '',
        radioValue: '',
        toggleValue: false,
        checkedValues: []
      }
    }
  })
</script>
</body>
</html>